<template>
  <div id="body">
    <header>
      <h1>中国疫情实时展示</h1>
      <span class="time">数据更新于:{{ this.lastUpdateTime }}</span>
      <span class="author">作者:HelloWorld</span>
      <a
        class="link"
        href="https://news.qq.com/zt2020/page/feiyan.htm?from=timeline&isappinstalled=0#/"
        target="_blank"
      >
        <span>数据来源:腾讯新闻</span>
      </a>
      <nav>
        <a class="nav-link active" href="https://edisplay.web.cloudendpoint.cn/#/china" target="_blank">
          <span>中国疫情</span>
        </a>
        <span>|</span>
        <a class="nav-link" href="http://47.100.123.64/" target="_blank">
          <span>世界疫情</span>
        </a>
      </nav>
    </header>
    <div id="left1">
      <addLine />
    </div>
    <div id="left2"><total-line /></div>
    <div id="center1">
      <div class="item">
        <div class="number" id="confirm" style="color: #be2121">
          {{ this.chinaTotal.localConfirm }}
        </div>
        <div class="text">本土现有确诊</div>
      </div>
      <div class="item">
        <div class="number" id="heal" style="color: #fc6d59">
          {{ this.chinaTotal.nowConfirm }}
        </div>
        <div class="text">现有确诊</div>
      </div>
      <div class="item">
        <div class="number" id="dead" style="color: #cc9933">
          {{ this.chinaTotal.confirm }}
        </div>
        <div class="text">累计确诊</div>
      </div>
      <div class="item item4">
        <div class="number" id="nowConfirm" style="color: #e61c1d">
          {{ this.chinaTotal.noInfect }}
        </div>
        <div class="text">无症状感染者</div>
      </div>
      <div class="item">
        <div class="number" id="noInfect" style="color: #ae3ac6">
          {{ this.chinaTotal.importedCase }}
        </div>
        <div class="text">境外输入</div>
      </div>
      <div class="item item6">
        <div class="number" id="import" style="color: #003366">
          {{ this.chinaTotal.dead }}
        </div>
        <div class="text">累计死亡</div>
      </div>
    </div>
    <div id="center2">
      <ChinaMap></ChinaMap>
    </div>
    <div id="right1">
      <bar />
    </div>
    <div id="right2">
      <rose />
    </div>
  </div>
</template>

<script>
import ChinaMap from '../components/charts/ChinaMap'
import Rose from '../components/charts/Rose.vue'
import Bar from '../components/charts/Bar.vue'
import Line from '../components/charts/Line.vue'
import TotalLine from '../components/charts/TotalLine.vue'
export default {
  components: { ChinaMap, Rose, Bar, addLine: Line, TotalLine },
  data() {
    return {
      chinaTotal: {},
      lastUpdateTime: '',
      timerId: '',
      totalData: {}
    }
  },
  methods: {
    async getData() {
      const { data: res } = await this.$jsonp(
        'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      )
      this.totalData = JSON.parse(res)
      this.lastUpdateTime = this.totalData.lastUpdateTime
      this.chinaTotal = this.totalData.chinaTotal
      clearInterval(this.timerId)
      this.timerId = setInterval(this.getData, 1800000)
    }
  },
  mounted() {
    this.getData()
  },
  beforeDestroy() {
    clearInterval(this.timerId)
  }
}
</script>
<style lang="scss" scoped>
#body {
  background-color: #fff;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  header {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eaecec;
    nav {
      position: absolute;
      right: 30px;
      top: 40px;
      .nav-link {
        padding: 10px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        text-decoration: none;
        color: #409eff;
        &:hover {
          color: #85ce61;
          text-decoration: none;
        }
      }
      .active {
        color: #403399;
      }
    }

    // 标题
    h1 {
      font-size: 40px;
      color: #636562;
    }
    // 时间
    .time {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 20px;
      color: black;
    }
    .link {
      position: absolute;
      left: 10px;
      top: 25px;
      font-size: 15px;
      color: #cccccc;
      text-decoration: none;
    }
    .author {
      position: absolute;
      left: 10px;
      top: 5px;
      font-size: 15px;
      color: #cccccc;
    }
  }
}
#left1 {
  width: 30%;
  height: 45%;
  position: absolute;
  left: 0;
  top: 10%;
}
#left2 {
  width: 30%;
  height: 45%;
  position: absolute;
  top: 55%;
  left: 0;
}
#center1 {
  &::before {
    position: absolute;
    top: 0;
    content: '';
    left: 10px;
    height: 30px;
    width: 35px;
    border-top: 2px solid #fd9055;
    border-left: 2px solid #fd9055;
  }
  &::after {
    position: absolute;
    top: 0;
    content: '';
    right: 20px;
    height: 30px;
    width: 35px;
    border-top: 2px solid #fd9055;
    border-right: 2px solid #fd9055;
  }
  width: 40%;
  height: 25%;
  position: absolute;
  left: 30%;
  top: 10%;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 33.33%;
    .number {
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: gold;
      font-size: 30px;
      font-weight: bold;
    }
    .text {
      height: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #555555;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .item4 ::before {
    position: absolute;
    bottom: 0px;
    content: '';
    left: 10px;
    height: 30px;
    width: 35px;
    border-bottom: 2px solid #fd9055;
    border-left: 2px solid #fd9055;
  }
  .item6::after {
    position: absolute;
    bottom: 0px;
    content: '';
    right: 20px;
    height: 30px;
    width: 35px;
    border-bottom: 2px solid #fd9055;
    border-right: 2px solid #fd9055;
  }
}

#center2 {
  width: 40%;
  height: 65%;
  position: absolute;
  top: 35%;
  left: 30%;
}
#right1 {
  width: 30%;
  height: 45%;
  position: absolute;
  top: 10%;
  right: 0;
}
#right2 {
  width: 30%;
  height: 45%;
  position: absolute;
  top: 55%;
  right: 0;
}
</style>
